<template>
	<view class="terms-service-wrapper" :style="{'top':top}">
		<checkbox-group @change="checkboxChange">
			<checkbox color="#365FFF" :value="checkboxName" class="checkbox" :checked="isAgreeServicTerms" />
		</checkbox-group><text class="label">登录即代表同意</text>
		<text class="terms-name" @click="toAgreement(AGREEMENT_TYPE.SERVICE)">《用户服务协议》</text><text
			class="label">和</text><text class="terms-name" @click="toAgreement(AGREEMENT_TYPE.PRIVACY)">《用户隐私政策》</text>
	</view>
</template>

<script lang="ts">
	import { AGREEMENT_TYPE } from '@/enum/agreement';
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<script lang="ts" setup>
	import {
		Ref,
		ref,
		defineExpose,
		defineProps,
		toRefs,
	} from 'vue';
	//checkbox name
	const checkboxName = 'service-checkbox'
	//是否同意服务条款
	const isAgreeServicTerms : Ref<boolean> = ref(false);

	const props = defineProps({
		top: {
			type: String,
		}
	})

	const { top } = toRefs(props);

	const checkboxChange = ({
		detail
	} : any) => {
		isAgreeServicTerms.value = detail.value.indexOf(checkboxName) !== -1
	}

	const toAgreement = (type : AGREEMENT_TYPE) => {
		uni.router.route({
			url: '/pages/agreement/agreement',
			params: {
				type,
			}
		})
	}

	defineExpose({
		isAgreeServicTerms,
	})
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>